$(function () {
	var currentPage = 1;
	var pageSize = 5;

	var picArr = []; //存储上传图片信息 
	//1-请求后台商品数据并渲染
	function render() {
		$.ajax({
			url: '/product/queryProductDetailList',
			data: {
				page: currentPage,
				pageSize: pageSize
			},
			dataType: 'json',
			success: function (info) {
				console.log(info);
				//渲染
				$('tbody').html(template('tmp', info));
				// 根据总数生成分页
				setPage(info.total);
			}
		})
	}

	render();

	//2-分页
	function setPage(total) {
		$("#paginator").bootstrapPaginator({
			bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
			currentPage: currentPage,
			totalPages: Math.ceil(total / pageSize),
			onPageClicked: function (event, originalEvent, type, page) {
				//为按钮绑定点击事件 page:当前点击的按钮值
				//跳转到对应页面
				currentPage = page;
				//渲染
				render();
			}

		});
	}

	// 3-二级分类下拉列表渲染
	$.ajax({
		url: '/category/querySecondCategoryPaging',
		data: {
			page: 1,
			pageSize: 1000
		},
		dataType: 'json',
		success: function (info) {
			console.log(info);
			$('.dropdown-menu').html(template('tmp-list', info));
		}
	})

	// 4-点击二级分类 设置选中项
	$('.dropdown-menu').on('click', 'a', function () {
		// 把当前a标签的值，赋值给 按钮
		$('.cate-title').text($(this).text());
		// 把id保持到隐藏域
		$('#brandId').val($(this).data('id'));
	})


	// 5- 上传商品图片，只能上传三张 
	// 其实多张图片上传，就是 多个单张图片上传 

	$("#file").fileupload({
		dataType: "json",
		//e：事件对象
		//data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
		done: function (e, data) {
			console.log(data.result);
			// 只保留最近上传的三张图片 

			var r = data.result; //获取返回图片的信息 

			// 1-把图片添加到 数组中  (向数组最前面添加)
			picArr.unshift(r);
			// 2-让图片显示(向盒子前面添加图片)
			$('.img-box').prepend('<img src="' + r.picAddr + '" height="80" />');



			// 数组长度大于3， 删除最后一元素， 从img-box中移除最后一个元素 
			if (picArr.length > 3) {
				picArr.pop(); //删除最后一个图片 
				$('.img-box img:last-child').remove(); //删除自己  
			}

			// 判断 如果图片是3张，则验证通过
			if(picArr.length == 3) {
				$('#form').data('bootstrapValidator').updateStatus('imgStatus','VALID');
			}

			console.log(picArr);

			// 数组：  
			// shift() 从前面上 
			// unshift() 从前面加
			// push()  pop();

			// append() 追加子元素  prepend()  前面添加子元素
			// remove() 删除自己， empty(); 清空盒子内容    
		}
	});



	// 6.表单验证
	$('#form').bootstrapValidator({
		//1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
		excluded: [],

		//2. 指定校验时的图标显示，默认是bootstrap风格
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		//3-配置验证字段 
		fields: {
			brandId: {
				validators: {
					notEmpty: {
						message: '请选择二级分类'
					}
				}
			},
			proName: {
				validators: {
					notEmpty: {
						message: '请输入商品名称'
					}
				}
			},
			proDesc: {
				validators: {
					notEmpty: {
						message: '请输入商品描述'
					}
				}
			},
			num: {
				validators: {
					notEmpty: {
						message: '请输入库存'
					},
					//非0开头数字  
					// 正则校验
					regexp: {
						regexp: /^[1-9]\d*$/, //校验规则
						message: '库存必须是非0开头的数字'
					}
				}
			},
			size: {
				validators: {
					notEmpty: {
						message: '请输入尺码'
					},
					// xx-xx  x是数字 
					regexp: {
						regexp: /^[1-9]\d-[1-9]\d$/,
						message: '尺码格式为xx-xx, x是数字'
					}
				},


			},
			oldPrice: {
				validators: {
					notEmpty: {
						message: '请输入原价'
					}
				}
			},
			price: {
				validators: {
					notEmpty: {
						message: '请输入现价'
					}
				}
			},
			imgStatus: {
				validators: {
					notEmpty: {
						message: '请上传3张图片'
					}
				}
			}
		}
	})



	// 7.在表单验证通过的情况下，点击提交按钮，添加商品数据
	$('#form').on('success.form.bv', function (e) {
		e.preventDefault();
		// ajax发生数据
		var str = $('#form').serialize();  //快速获取表单数据 缺少了图片上数据  name=zs&age=18  & k = v
		picArr = JSON.stringify(picArr);   //转成json字符串

		str = str + '&picArr=' + picArr;
		// console.log(str);
		$.ajax({
			url: '/product/addProduct',
			type: 'post',
			data: str,
			dataType: 'json',
			success: function (info) {
				console.log(info);
				// 重新渲染第一页
				currentPage = 1;
				render();
				// 重置表单样式(手动重置其他样式)
				$('#form').data('bootstrapValidator').resetForm(true);
				// 手动重置
				$('.cate-title').text('请选择二级分类');
				$('.img-box').empty();
				// 隐藏模态框
				$('.modal-add').modal('hide');
				// 数据重置
				picArr = [];
			}
		})
	});
})